<template>
	<div class="FeaturedGoodsNew">
		<blue-button :text="'新增'" :clickEvent="clickAdd"></blue-button>
		<table class="sv-table">
			<tr class="table-th">
				<th>资源位</th>
				<th>资源图片</th>
				<th>配置路径</th>
				<th>更新日期</th>
				<th>操作</th>
			</tr>
			<tr class="table-tr" v-for="(item,index) in myDateList" :key="index">
				<td>{{index+1}}</td>
				<td style=""><img :src="item.publicityPicture" /></td>
				<td>{{urlfn(item.extendField)}}</td>
				<td>{{item.updateTm?myGetTime(item.updateTm):myGetTime(item.createTm)}}</td>
				<td style="text-align: center;">
					<gray-button class="grayBtn" :text="'更新'" :clickEvent="clickEdit.bind(this, index,item)"></gray-button>
					<gray-button class="grayBtn" :text="'删除'" :clickEvent="deleteGoods.bind(this, item)"></gray-button>
				</td>
			</tr>
		</table>
		<edit-model ref="editModel" title="自定义产品菜单">
			<div class="slot-banner" slot="main">
				<!--<div>
					<p class="eidt-slot-title">资源位</p>
					<input type="text" :value="ziyuanwei?ziyuanwei:''" class="casor" disabled/>
				</div>-->
				<div>
					<p class="eidt-slot-title">宣传图片<span class="required">*</span></p>
					<div class="upload-box">
						<!-- <img-upload :imgShowList="getBannerUrl ? [getBannerUrl] : []"></img-upload> -->
						<img-upload :deleteCallback="deleteImgCallback" ref="bannerImg" :imgShowList="getBannerUrl ? [getBannerUrl] : []">
						</img-upload>
					</div>
				</div>
				<div>
					<p class="eidt-slot-title" style="width: 23%;">自定义跳转链接</p><!--<span class="required" style="display: inline;">*</span>-->
					<page-path :changeEvent="changeEvent" :defaultChooseProps="valueArray" rootSelector="#edit-model-box"></page-path>
				</div>
				<div class="fabu-box">
					<blue-button text="发布" :clickEvent="upLoadImg"></blue-button>
					<gray-button text="取消" :clickEvent="hideModel" class="confimBtn"></gray-button>
				</div>
			</div>
		</edit-model>
		<m-toast ref="toast"></m-toast>
		<m-dialog ref="dialog"></m-dialog>
	</div>

</template>

<script>
	import BlueButton from "../../edit-components/BlueButton";
	import getDate from "./getGoodsDate.js";
	import madd from "./add.js";
	import medit from "./edit.js";
	import deleteGoods from './delete.js';
	import GrayButton from "../../edit-components/GrayButton";
	import imgUpload from "../../real-components/ImgUpload2";
	import EditModel from "../../edit-components/EditModel";
	import Toast from "../../edit-components/Toast";
	import Dialog from "../../edit-components/Dialog";
	import PagePath from "../../edit-components/PagePath";
	export default {
		props: {
			/*relGroup: {
				type: String,
				default: ""
			},*/
			config:{
				type:Object,
				default: ()=>{}
			}
		},
		data() {
			return {
				dataList: [],
				imgUrl: '', //图片地址信息 
				uploadType: '',
				dataListSinger: {},
				getBannerUrl: null,
				ziyuanwei: null,
				editItem: null,
				//跳转路径配置二级联动（数据模拟）
				selected: "",
				//获取门店数据
				storeCode: "",
				valueArray:[],
			}
		},
		components: {
			"blue-button": BlueButton,
			"gray-button": GrayButton,
			"img-upload": imgUpload,
			"edit-model": EditModel,
			"m-toast": Toast,
			"m-dialog": Dialog,
			"page-path": PagePath,
		},
		computed: {
			myDateList() {
				return this.dataList;
			},
            relGroup(){
				return this.config.id
			}
		},
		methods: {
			//获取门店code
			getShopCode() {
				this.storeCode = localStorage.getItem("storeCode");
			},
			//获取子组件路径的值
			changeEvent(data) {
				this.selected = data
			},
			//路径地址展示
			urlfn(item) {
				if(JSON.parse(item).url){
					return JSON.parse(item).url.UIContent
				}else{
					return "--"
				}
			},
			//数据 渲染
			getDateList() {
				let callback = (data) => {
					this.dataList = data;
				}
				getDate(callback, this.relGroup);
			},
			//新增
			add() {
				let params = this.getParams();
				let callback = data => {
					this.dataList = data;
					this.$refs.editModel.hideCover();
				}
				madd(params, this.relGroup, callback);
			},
			edit() {
				let params = this.getParams();
				let callback = data => {
					this.dataList = data;
					this.$refs.editModel.hideCover();
				}
				medit(params, this.relGroup, callback);
			},
			deleteGoods(item) {
				console.log(item, 'aa');
				let msg = '确定要删除吗？';
				let confirmFn = () => {
					let params = {
						rid: item.rid,
						storeCode: this.storeCode,
						relGroup: this.relGroup
					}
					let callback = data => {
						this.dataList = data;
					}
					deleteGoods(params, this.relGroup, callback);
				}
				this.infoDialog(msg, confirmFn);

			},
			getParams() {
				var obj = {
					"url": this.selected
				}
				var str = JSON.stringify(obj);
				if(this.uploadType == 'add') {
					var params = {
						publicityPicture: this.imgUrl,
						storeCode: this.storeCode,
						relGroup: this.relGroup,
						extendField: str,
					}
				} else if(this.uploadType == 'edit') {
					var params = {
						storeCode: this.storeCode,
						publicityPicture: this.imgUrl,
						rid: this.editItem.rid,
						relGroup: this.relGroup,
						extendField: str,
					}
				}

				return params;
			},
			infoDialog(msg, confirmFn) {
				this.$refs.dialog.dialog({
					msg,
					confirmFn
				});
			},
			myGetTime(param) {
				if(param) {
					let date = new Date(param);
					let year = date.getFullYear();
					let month = checkTime(date.getMonth() + 1);
					let day = checkTime(date.getDate());
					let hour = date.getHours();
					let min = checkTime(date.getMinutes());
					let sec = checkTime(date.getSeconds());
					let str = '';
					let mHour = 0;
					if(0 < Number(hour) && Number(hour) < 12) {
						mHour = hour;
						str = '上午'
					} else {
						mHour = Number(hour) - 12;
						str = '下午'
					}

					function checkTime(i) {
						if(i < 10) {
							i = '0' + i;
						}
						return i;
					}
					return year + '/' + month + '/' + day + '  ' + str + ' ' + mHour + ':' + min;
				} else {
					return '';
				}
			},
			//点击新增按钮
			clickAdd() {
				if(!getCookie("sessionId")){
				this.$refs.toast.toast("登录失效，请重新登录");
				return
			    }
				if(this.dataList.length > 4) {
					this.$refs.toast.toast("此模块只能添加五条数据");
					return;
				}
				this.showModel();
				this.uploadType = 'add';
				this.valueArray = []
				this.selected = ""
				this.imgUrl = '';
				this.getBannerUrl = '';
				this.dataListSinger = {};
				this.ziyuanwei = '';
				this.$refs.bannerImg.deleteImg();
				console.log(this.imgUrl, this.getBannerUrl, '清除数据')
			},
			clickEdit(index, item) {
				console.log(item, '编辑')
				this.getBannerUrl = item.publicityPicture;
				this.dataListSinger = item;
				this.valueArray = JSON.parse(item.extendField).url.valueArray
				this.ziyuanwei = Number(index) + 1;
				this.showModel();
				this.editItem = item;
				this.uploadType = 'edit';
				this.imgUrl = item.image;
				this.selected =  JSON.parse(item.extendField).url
			},
			showModel() {
				this.$refs.editModel.showCover();
			},
			hideModel() {
				this.$refs.editModel.hideCover();
			},
			async upLoadImg() {
				let response = await this.$refs.bannerImg.upload();
				if(response.status === 0) {
					this.errorToast("图片上传失败");
					return;
				}
				if(this.uploadType == 'add') {
					if(response.status === 1) {
						this.imgUrl = response.data[0];
						this.add();
					}
				} else {
					if(response.status === 1) {
						this.imgUrl = response.data[0];
						this.edit();
					} else if(response.status === 2) {
						if(!this.getBannerUrl) {
							this.errorToast("请上传图片");
							return;
						} else {
							this.edit();
						}
					}
				}

			},
			errorToast(msg, duration = 1000) {
				this.$refs.toast.toast(msg, duration);
			},
			deleteImgCallback() {
				this.imgUrl = '';
			}
		},
		filters: {

		},
		created() {
			
		},
		mounted() {
			if(!getCookie("sessionId")){
				this.$refs.toast.toast("登录失效，请重新登录");
			}
            this.getDateList();
			this.getShopCode()
		},
		watch: {
			relGroup(newVal) {
				this.getDateList();
				this.getShopCode()
			}
		}

	}
</script>

<style scoped>
	.confimBtn {
		margin-left: 20px;
	}
	
	.grayBtn {
		display: inline-block;
	}
	
	.fabu-box {
		display: flex;
		justify-content: center;
		margin-top: 30px;
	}
	
	.mySelect {
		border: 1px solid #ddd;
		padding: 5px 5px;
		width: 50%;
		height: unset;
		margin-bottom: 10px;
	}
	
	.casor {
		cursor: not-allowed;
	}
	
	.FeaturedGoodsNew tr td:nth-child(2) {
		width: 80px;
		display: inline-block;
		height: 66px;
		overflow: hidden;
		line-height: 66px;
		border: none
	}
	
	.FeaturedGoodsNew tr td:nth-child(2) img {
		height: 66px;
	}
</style>